<template>
  <div class="content-div">
    <div class="page-head">
      <img src="@/assets/images/bg-item.png" />
      <span>代办问诊</span>
    </div>
    <div class="list-box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div @click="$router.push('/productDetail?id=1')" class="msg-item-box" v-for="(item, index) in list" :key="index">
          <img src="https://hqpz.tanjirj.com//uploads/hospital_img/henanshengertongyiyuan.jpg" alt="" srcset="">
          <div class="msg-content-box">
            <div class="msg-name-box">
              <span>陪诊师</span>
              <span>88.00元/次</span>
            </div>
            <span class="msg-content">服务事项服务事项</span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  name: 'index',
  data () {
    return {
      loading: false,
      finished: false,
      list: []
    }
  },
  created () {},
  methods: {
    onLoad () {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        this.loading = false
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    }
  },
  mounted () {}
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #F8F8F8;
    min-height: 100%;
    .page-head{
      width: 100%;
      height: 164px;
      position: relative;
      img{
        width: 100%;
        height: 164px;
        vertical-align: middle;
      }
      span{
        position: absolute;
        left: 28px;
        top: 64px;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .list-box{
      position: relative;
      top: -20px;
      z-index: 2;
      .msg-item-box{
        width: 300px;
        margin-left: 10px;
        border-bottom: 1px solid #F8F8F8;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background-color: #FFFFFF;
        border-radius: 6px;
        margin-bottom: 10px;
        img{
          width: 60px;
          height: 60px;
          vertical-align: middle;
        }
        .msg-content-box{
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;
          width: calc(100% - 70px);
          margin-left: 10px;
          height: 60px;
          .msg-name-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-weight: bold;
            span:last-child{
              font-size: 14px;
              color: #FF0000;
              font-weight: bold;
            }
          }
          .msg-content{
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }
        }
      }
    }
  }
</style>
